
import React, { useState, useEffect } from 'react'
import { Modal, Form, Tabs, Input, Button, Checkbox, Select, Row, Col, message, Spin } from 'antd';
import { setStore, getStore } from '@/utils/commons'
import Funs from '@/utils/Funs'
import API from '@/api/api'
import './index.scss';
const { TabPane } = Tabs;
const { Option } = Select;

function UnBindGoogle(props) {
    const [load, setLoad] = useState(false)
    const [form] = Form.useForm();

    const cancelModal = () => {
        props.close()
    }

    const onFinish = async (values) => {
        let opts = { onceCode: values.onceCode }
        let res = await API.unBindGoogle(opts)
        setLoad(true)
        if (res) {
            setLoad(false)
            message.success('解绑googleAuth成功')
            setTimeout(() => { window.location.reload() }, 500)
        } else {
            setLoad(false)
        }
    };

    return (
        <Modal className="unbind-google" visible={props.status} onCancel={cancelModal} footer={null}>
            {
                !load ? null :
                    <div className="load-mark">
                        <Spin />
                    </div>
            }

            <Form
                form={form}
                className="bind-form"
                onFinish={onFinish}
            >
                <Row justify="center">
                    <h2 className="bind-title">解绑GoogleAuth</h2>
                </Row>

                <Form.Item name="onceCode" rules={[
                    { required: true, message: '请输入密钥' }
                ]}>
                    <Input className="bind-input" placeholder="输入密钥" bordered={false} />
                </Form.Item >
                <Form.Item>
                    <Button type="primary" htmlType="submit" className="bind-form-button">
                        解绑
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    )
}

export default UnBindGoogle